<template>
  <div class="box">
    <!-- 标题栏 -->
    <h2 class="box-title">vue3基础功能测试</h2>
    <!-- 导航栏 -->
    <div class="box-navigator">
      <RouterLink class="box-navigator-link" :replace="item.replace" v-for="item in navList"
        :active-class="getClass(item)" :to="item.path" :key="item.id">
        {{ item.title }}
      </RouterLink>
    </div>
    <!-- 内容区域 -->
    <div class="box-content">
      <!-- <keep-alive> -->
        <RouterView></RouterView>
      <!-- </keep-alive> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs } from 'vue';
import { RouterView, useRoute } from 'vue-router';
// import  '@utils/webworks.js';


const route = useRoute()
const { name, path } = toRefs(route)
// console.log(route, name.value, path.value);

type route = {
  id: number,
  title: string,
  path: string,
  name: string,
  replace: boolean,
  meta: object
}
function getClass(item: route) {
  // console.log("渲染了函数 getClass--------", path.value, item.path);
  return path.value.includes(item.path) ? 'nav-active' : '';
}

const navList = reactive([
  { id: 1, title: '首页', path: "/main/home", name: 'home', replace: false, meta: {} },
  { id: 2, title: '新闻', path: "/main/news", name: 'news', replace: false, meta: {} },
  { id: 4, title: '状态管理', path: "/main/pinia", name: 'pinia', replace: false, meta: {} },
  { id: 5, title: '组件基础知识', path: "/other/props", name: 'props', replace: false, meta: {} },
  { id: 3, title: '关于', path: "/main/about", name: "about", replace: false, meta: {} }
])
</script>

<style lang="scss" scoped>
$color1: #614ae4;

.box {
  padding: 10px;

  &-title {
    padding: 20px;
    text-align: center;
    color: $color1;
    background-color: #eee;
  }

  &-navigator {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 20px 0;

    &-link {
      padding: 10px;
      text-align: center;
      padding: 12px 16px;
      background-color: #ddd;
      min-width: 80px;
      border-radius: 4px;
      text-decoration: none;
      font-size: 16px;

      &:active {
        color: $color1;
      }
    }

    .nav-active {
      background-color: $color1;
      color: #fff;
    }
  }

  &-content {
    border: 1px solid $color1;
    padding: 15px;
    margin-top: 20px;
    min-height: 300px;
    border-radius: 8px;
  }
}
</style>
